<template>
    <j-modal :title="`快速问诊`" :visible="visible" fullscreen @cancel="handleCancel" :footer="null">
        <a-spin tip="Loading..." :spinning="spinning">
            <a-card :bordered="false">
                <div>
                    <a-steps :current="current">
                        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
                    </a-steps>
                </div>
            </a-card>
            <div v-show="current == 0" class="cont">
                <a-card style="width: 800px;" :bordered="false">
                    <j-form-container>
                        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                            <a-row>
                                <a-col :span="12">
                                    <a-form-model-item required label="身份证号" :labelCol="labelCol"
                                        :wrapperCol="wrapperCol" prop="idCard">
                                        <a-input v-model="model.idCard" @blur="searchUser"
                                            placeholder="请输入身份证号"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item required label="联系电话" :labelCol="labelCol"
                                        :wrapperCol="wrapperCol" prop="phone">
                                        <a-input v-model="model.phone" @blur="searchUser"
                                            placeholder="请输入联系电话"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item required label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                        prop="name">
                                        <a-input v-model="model.name" placeholder="请输入姓名"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item required label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                        prop="gender">
                                        <j-dict-select-tag v-model="model.gender" placeholder="请选择性别" dictCode="sex"
                                            style="width: 100%" />
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item required label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                        prop="address">
                                        <a-input v-model="model.address" placeholder="请输入地址"></a-input>
                                    </a-form-model-item>
                                </a-col>

                                <a-col :span="12">
                                    <a-form-model-item label="所属机构" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                        prop="orgId">
                                        <a-select v-model="model.orgId" placeholder="请选择所属机构" show-search
                                            option-filter-prop="children" :filter-option="filterOption">
                                            <a-select-option :value="i.id" v-for="(i, o) in hospList" :key="o">{{ i.name
                                            }}</a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="血型" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                        prop="bloodType">
                                        <j-dict-select-tag v-model="model.bloodType" placeholder="请选择血型"
                                            dictCode="bloodType" style="width: 100%" />
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="过敏史" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                        prop="allergy">
                                        <a-input v-model="model.allergy" placeholder="请输入过敏史"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="医保卡号" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                        prop="medicareCard">
                                        <a-input v-model="model.medicareCard" placeholder="请输入医保卡号"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="24" style="display: flex;justify-content: center;margin-top: 50px;">
                                    <a-button style="width: 180px;height: 36px;" v-if="current < steps.length - 1"
                                        type="primary" @click="next">
                                        下一步
                                    </a-button>
                                </a-col>
                            </a-row>
                        </a-form-model>
                    </j-form-container>
                </a-card>
            </div>
            <div v-show="current == 1" class="cont">
                <a-card style="width: 800px;" :bordered="false">
                    <j-form-container style="width: 400px;">
                        <a-form-model ref="form1" :model="model1" slot="detail">
                            <a-row>
                                <a-col :span="24">
                                    <a-form-model-item label="机构" required :labelCol="labelCol" :wrapperCol="wrapperCol"
                                        prop="orgId">
                                        <a-select v-model="model1.orgId" placeholder="请选择机构" @change="changeOrg"
                                            show-search option-filter-prop="children" :filter-option="filterOption">
                                            <a-select-option :value="i.id" v-for="(i, o) in hospList" :key="o">{{ i.name
                                            }}</a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-model-item v-if="model1.orgId" required label="科室" :labelCol="labelCol"
                                        :wrapperCol="wrapperCol" prop="dept">
                                        <a-select v-model="model1.dept" placeholder="请选择科室" @change="changeDept">
                                            <a-select-option :value="i.id" v-for="(i, o) in deptList" :key="o">{{
                                                i.deptName
                                            }}</a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-model-item v-if="model1.dept" required label="预约日期" :labelCol="labelCol"
                                        :wrapperCol="wrapperCol" prop="yyDate">
                                        <j-date placeholder="请选择预约日期" @change="changeDate" v-model="model1.yyDate"
                                            style="width: 100%" />
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-model-item v-if="model1.dept" required label="医生" :labelCol="labelCol"
                                        :wrapperCol="wrapperCol" prop="doctorId">
                                        <a-select v-model="model1.doctorId" placeholder="请选择医生" @change="changeDoct">
                                            <a-select-option :value="i.id" v-for="(i, o) in docList" :key="o">{{ i.name
                                            }} {{ i.cert }}</a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </a-form-model>
                    </j-form-container>
                    <div class="yyV" v-if="timeList.length">
                        <div class="yyVi" v-for="(i, o) in timeList" :key="o">
                            <div class="yyVit"> {{ i.yyInterval }}</div>
                            <div class="yyVib">
                                <a-popconfirm :title="`确认预约 ${i.yyInterval} 时段？`" ok-text="确认" cancel-text="取消"
                                    @confirm="confirm(i)">
                                    <a-tag :color="i.status == 0 ? '#03a386' : '#bbb'" size="mini">{{ i.status == 0
                                        ? '预约' : i.status == 1 ? '已满' : '过期' }}</a-tag>
                                </a-popconfirm>

                            </div>
                        </div>
                    </div>
                    <div class="backStep">
                        <a-button type="danger" style="width: 180px;height: 36px;" @click="current = 0">上一步</a-button>
                    </div>
                </a-card>
            </div>
            <div v-show="current == 2" class="cont">
                <a-card style="width: 800px;" :bordered="false">
                    <div class="joinbs">
                        <a-button style="width: 180px;height: 36px;" type="primary" @click="join">加入会诊</a-button>
                    </div>
                    <div class="backStep">
                        <a-button type="danger" style="width: 180px;height: 36px;"
                            @click="visible = false">关闭</a-button>
                    </div>
                </a-card>
            </div>
            <ConsultationAdd ref='ConsultationAdd' />
        </a-spin>
    </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { postAction } from '../../../api/manage';
import ConsultationAdd from '../../wz/online/modules/consultationAdd.vue'
import moment from 'moment';
export default {
    components: { ConsultationAdd },
    data() {
        return {
            moment,
            spinning: false,
            visible: false,
            current: 0,
            steps: [
                {
                    title: '患者信息录入',
                },
                {
                    title: '预约会诊',
                },
                {
                    title: '在线会诊',
                },
            ],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            model: {},
            validatorRules: {
                name: [{ required: true, message: '请输入姓名!' }],
                gender: [{ required: true, message: '请选择性别!' }],
                address: [{ required: true, message: '请输入地址!' }],
                idCard: [{ required: true, message: '请输入身份证号码!' }],
                phone: [{ required: true, message: '请输入联系方式!' }],
                orgId: [{ required: true, message: '请选择所属机构!' }],
                bloodType: [{ required: true, message: '请选择血型!' }],
                allergy: [{ required: true, message: '请输入过敏史!' }],
            },
            patientId: '',
            hospList: [],
            deptList: [],
            model1: {},
            docList: [],
            timeList: [],
            roomName: null,
        }
    },
    mounted() {
        getAction('/wz/hosp/wzHospital/listAll', { pageNo: 1, pageSize: 999 }).then(res => {
            this.hospList = res.result.records;
        })
    },
    methods: {
        searchUser(event) {
            getAction('/wz/patient/wzPatientInfo/queryByCardOrPhone', { cardOrPhone: event.target._value }).then(res => {
                if (res.result) {
                    this.$message.info(`当前患者身份证号/联系方式信息 ${res.result.idCard} 已存在！`)
                    this.model = res.result
                }
            })
        },
        join() {
            this.visible = false;
            this.$refs.ConsultationAdd.show({ wzReserve: { patientId: this.patientId }, name: this.roomName });
        },
        confirm(item) {
            const that = this;
            that.spinning = true;
            postAction('/wz/reserve/wzReserve/quickInquiry', {
                patient: that.model,
                reserve: {
                    scheduleId: item.id,
                    dept: that.model1.dept,
                    doctorId: that.model1.doctorId,
                    orgId: that.model1.orgId,
                    yyDate: that.model1.yyDate,
                    yyInterval: item.yyInterval,
                }
            }).then(res => {
                that.spinning = false;
                if (res.code == 200) {
                    that.$message.success(res.message);
                    that.roomName = res.result[0].roomId_dictText
                    that.current = 2
                } else {
                    that.$message.error(res.message);
                }
            })
        },
        getMainlist(row) {
            if (this.model1.yyDate != this.moment().format('YYYY-MM-DD')) return row;
            row.map(i => {
                if (this.moment(this.model1.yyDate + ' ' + i.yyInterval.split('-')[0]) < this.moment()) {
                    i.status = 9
                }
            })
            return row;
        },
        show() {
            this.visible = true;
            this.current = 0
            this.model = {}
            this.model1 = {}
            this.timeList = []
        },
        handleCancel() {
            this.visible = false;
        },
        changeDoct() {
            getAction('/wz/schedule/wzSchedule/getTimeListByDoctor', {
                doctorId: this.model1.doctorId,
                date: this.model1.yyDate
            }).then(res => {
                this.timeList = this.getMainlist(res.result);
            })
        },
        changeOrg() {
            if (this.model1.yyDate) this.model1.yyDate = null
            if (this.model1.doctorId) this.model1.doctorId = null
            if (this.model1.dept) this.model1.dept = null
            getAction('/wz/hosp/wzHospDept/queryByOrgId', { pageNo: 1, pageSize: 999, orgId: this.model1.orgId }).then(res => {
                this.deptList = res.result;
            })
        },
        changeDept() {
            if (this.model1.yyDate) this.model1.yyDate = null
            if (this.model1.doctorId) this.model1.doctorId = null
        },
        changeDate() {
            if (!this.model1.yyDate) return;
            getAction('/wz/doctor/wzDoctorInfo/queryByDeptIdAndDate', { pageNo: 1, pageSize: 999, date: this.model1.yyDate, deptId: this.model1.dept }).then(res => {
                this.docList = res.result;
            })
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        next() {
            const that = this;
            that.$refs.form.validate(valid => {
                if (valid) {
                    that.current = 1
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.cont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.backStep {
    position: absolute;
    bottom: -30px;
    left: calc(50% - 90px);
}

.yyV {
    width: 400px;
    overflow-y: auto;
    max-height: 600px;

    .yyVi {
        width: 100%;
        justify-content: space-around;
        display: flex;
        align-items: center;
        margin: 5px 0;
        padding: 5px 0;
        font-size: 18px;
        border-bottom: 1px dashed #ccc;
    }

    .yyVib {
        /deep/span {
            cursor: pointer;
            font-size: 15px;
        }
    }
}

.joinbs {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}

/deep/.ant-card-body {
    display: flex;
    justify-content: center;
    position: relative;
}

/deep/.ant-steps {
    width: 1000px;
}
</style>